<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>发情揭发</title>
		<link href="css/new_file.css" rel="stylesheet" type="text/css">
		<link href="css/mui.min.css" rel="stylesheet" type="text/css">
		<link href="css/faqinjiefa.css"rel="stylesheet" type="text/css">
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link href="css/mui.picker.min.css" rel="stylesheet" >
		
		<script src="js/echarts.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/testActivityName.js"></script>
		<script charset="UTF-8" src="js/config.js"></script>
		<script charset="UTF-8" src="js/core.js"></script>
		<script charset="UTF-8" src="js/cipher-core.js"></script>
		<script charset="UTF-8" src="js/tripledes.js"></script>
		<script charset="UTF-8" src="js/mode-ecb.js"></script>
		<script src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" src="js/spin.min.js"></script>
		<script charset="UTF-8" src="js/simple.tool.js"></script>
		<script charset="UTF-8" src="js/mui.picker.min.js"></script>

	</head>

	<body>
		<div class="spin"></div>
		<div class="head-zhjf">
			<img src="images/fanhui@3x.png" class="ryjk-tx" onclick="fanhuizhuan()">
			<p>发情揭发</p>
		</div>
		<div class="div-tj-aa">
			<div>
				<div style="background: #FFFFFF; padding: 15px; border-bottom: 1px solid #eeeeee;">
					<p style="float: left; font-weight: bold;">数据统计</p>
					<div style="float: right; color: #666666;">
						<div class="riqi-div-h" style="width: 50%;">
							<input id="datef1"  type="text" onfocus=this.blur() onclick="dtPicker1('datef1')" style="width: 44%;">
							<img class="riqi-h" style="margin-left: 25px;" src="images/tj-sjqj-h.png">
						</div>
						<div class="riqi-div-h" style="width: 50%;">
							<input id="datef2"  type="text" onfocus=this.blur() onclick="dtPicker2('datef2')" style="width: 44%;">
							<img class="riqi-h" style="margin-left: 25px;" src="images/tj-sjqj-h.png">
						</div>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
				</div>
				<div style="background: #FFFFFF; padding-bottom: 15px; padding-top: 15px;">
					<div class="sjtj-fq">
						<p class="red-z" id="oestrus1">0</p>
						<div>自然发情</div>
					</div>
					<div class="sjtj-fq">
						<p class="orange-z" id="oestrus2">0</p>
						<div>发情未配</div>
					</div>
					<div class="sjtj-fq">
						<p class="blue-z" id="oestrus3">0</p>
						<div>发情配种</div>
					</div>
					<div class="sjtj-fq">
						<p class="blue-z" id="oestrus4">0</p>
						<div>同期配种</div>
					</div>
					<div class="clear"></div>
				</div>
				<div style="background: #FFFFFF; border-top:1px solid #eeeeee ; padding-bottom: 15px; margin-top: 10px;">
					<p class="top-bt">发情未配原因TOP5</p>
					<div >
						<table class="mjob2_qibg_tab" id="lu_table">
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="moban-lb" style="border-bottom:aliceblue;">
			<div class="moban-lb-l">
				<div class="ziduan-mb" style="color: #333;font-size: 16px;font-weight: bold;margin-left: 25px;width: 100px;">当日数据统计</div>
			</div>

			<div class="moban-lb-r">
				<input id="birthday" type="text" onfocus=this.blur() onclick="dtPicker3('birthday')" style="float:right ;text-align: right;margin-right: 25px" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="div-tj-aa">
			<div class="fatj-div">
				<div id="main2" style="height:280px;width: 100%;"></div>
			</div>
		</div>
		<div class="div-tj-aa">
			<div class="fatj-div">
				<div id="main" style="height:280px;width: 100%;"></div>
			</div>
		</div>
		<div class="div-tj-aa">
			<div class="fatj-div">
				<div id="main1" style="height:280px;width: 100%;"></div>
			</div>
		</div>

		<script>
			$(function () {//获得数据统计数据
				MRtime();
				getTongJiData();
				ShowTuXing();
			});
			var  datesuo=true;
			$("#datef1").change(function(){
				if (datesuo==true) {
					datesuo=false;
					getTongJiData();
					datesuo=true;
				}
			});
			$("#datef2").change(function(){
				if (datesuo==true) {
					datesuo=false;
					getTongJiData();
					datesuo=true;
				}
			});
			function dtPicker1(str){
					           var dtPicker = new mui.DtPicker({ type: 'date' });
					           /*参数：'datetime'-完整日期视图(年月日时分)
					                   'date'--年视图(年月日)
					                   'time' --时间视图(时分)
					                   'month'--月视图(年月)
					                   'hour'--时视图(年月日时)
					           */      
					           dtPicker.show(function (selectItems) {
					              var y = selectItems.y.text;  //获取选择的年
					              var m = selectItems.m.text;  //获取选择的月
					              var d = selectItems.d.text;  //获取选择的日
					              var date = y + "-" + m + "-" + d ; 
					              $("#"+str).val(date); 
								  if (datesuo==true) {
								  	datesuo=false;
								  	getTongJiData();
								  	datesuo=true;
								  }
					           })
				}
			function dtPicker2(str){
					           var dtPicker = new mui.DtPicker({ type: 'date' });
					           /*参数：'datetime'-完整日期视图(年月日时分)
					                   'date'--年视图(年月日)
					                   'time' --时间视图(时分)
					                   'month'--月视图(年月)
					                   'hour'--时视图(年月日时)
					           */      
					           dtPicker.show(function (selectItems) {
					              var y = selectItems.y.text;  //获取选择的年
					              var m = selectItems.m.text;  //获取选择的月
					              var d = selectItems.d.text;  //获取选择的日
					              var date = y + "-" + m + "-" + d ; 
					              $("#"+str).val(date); 
								  if (datesuo==true) {
								  	datesuo=false;
								  	getTongJiData();
								  	datesuo=true;
								  }
					           })
				}
			function MRtime() {
					$("#datef1").val(getDateNow());
					$("#datef2").val(getDateNow());
			}
			function ShowTongJing() {//显示
				var TJData=JSON.parse(localStorage.getItem('DataTongJi'));
				var oestrus=TJData[0].oestrus;
				$("#oestrus1").html(oestrus.oestrus1);
				$("#oestrus2").html(oestrus.oestrus2);
				$("#oestrus3").html(oestrus.oestrus3);
				$("#oestrus4").html(oestrus.oestrus4);
				var target=oestrus.oestrus2;
				var reason=TJData[0].reason;
				$("#lu_table").html("");
				for (i=0;i<reason.length;i++){
					var percentage=(reason[i].num/target)*100+'';
					percentage=percentage.slice(0,5)+'%';
					var str='<tr>'
					+'<td>'+reason[i].reason+'</td>'
					+'<td>'+reason[i].num+'</td>'
					+'<td>'+percentage+'</td>'
					+'</tr>';
					$("#lu_table").append(str);
				}
				var dateff=TJData[0].date;
				$("#datef1").val(dateff.datef1);
				$("#datef2").val(dateff.datef2);
			}
			function getTongJiData() {
				var keys = JSON.parse(localStorage.getItem('key'));
				var map = {};
				map.key = keys;
				map.datef1 = $("#datef1").val();
				map.datef2 = $("#datef2").val();
				map.phoneType = "android";
				map.language = "zh";
				var jsonStr = JSON.stringify(map);
				console.log(jsonStr);
				showDialog();
				var ajaxTimeoutTest = $.ajax({
					type: "POST",
					url: url_prefix + "getTongJiData",
					dataType: 'JSON',
					timeout: 10000,
					data: {
						'request': encryptByDES(jsonStr)
					},
					success: function(data) {
						dismissDialog();
						var str1 = decryptByDESModeEBC(data["result"]); //解密
						var params = str1.replace(/\+/g, " "); //去掉字符串里的+号
						var str2 = UTFTranslate.ReChange(chineseFromUtf8Url(params)); //转utf8
						var datas = JSON.stringify(str2); //转JSON字符串
						var aa = datas.replace(/\\n/g, " "); //去掉换行
						var objs = eval('(' + aa + ')');
						var bb = eval('(' + objs + ')');
						if(bb.head.status == 1) {
							localStorage.setItem('DataTongJi', JSON.stringify(bb.data));
							ShowTongJing();
						} else {
							mui.alert(bb.head.info);
						}
					},
					complete: function(XMLHttpRequest, status) { //请求完成后最终执行参数
						dismissDialog();
						if(status == 'timeout') { //超时,status还有success,error等值的情况
							ajaxTimeoutTest.abort();
							mui.alert("网络请求超时...");
						}
					}
				});
			}
			
			function fanhuizhuan() {//返回按钮
				localStorage.setItem('ToChangeIntoNumber', JSON.stringify(0));
				localStorage.setItem('TurnOutNumber', JSON.stringify(0));
				FunctionList();
			}
			function ShowTuXing() {//显示图形
			var OmenOfOestrus = JSON.parse(localStorage.getItem('OmenOfOestrus'));
			var CreepingSpanBehavior = JSON.parse(localStorage.getItem('CreepingSpanBehavior'));
			var AbnormalActivityVolume = JSON.parse(localStorage.getItem('AbnormalActivityVolume'));
			var estrusExposeData = JSON.parse(localStorage.getItem('estrusExposeData'));
			$("#birthday").val(estrusExposeData.date);
			// 基于准备好的dom，初始化echarts图表
			var myChart = echarts.init(document.getElementById('main'));
			option = {
				title: {
					text: '一周爬跨行为统计',
					textStyle: {
						fontSize: 16,
						color: '#333'
					}
				},
				toolbox: {

					feature: {
						myTool1: {
							show: true,
							title: '自定义扩展方法',
							icon: 'images/pinjie.png',
							onclick: function() {
								alert('myToolHandler2')
							}
						}
					}
				},
				tooltip: {
					trigger: 'axis',
				},
				xAxis: [{
					type: 'category',
					data: CreepingSpanBehavior.title,
					axisLabel: { //坐标轴刻度标签的相关设置。
						rotate: 45 //刻度标签旋转的角度，
					},
					scale: true,
					show: true, //显示纵轴false-不显示，true-显示
					name: '(天)'
				}],
				yAxis: [{
					type: 'value',
					boundaryGap: [0, 0.1],
					show: true, //显示纵轴false-不显示，true-显示
					name: '(只)'
				}],
				series: [{
					type: 'bar',
					barWidth: 15,
					itemStyle: {
						normal: {
							color: '#fe8828',
							label: {
								position: 'top',
								show: true,
								textStyle: {
									color: '#fe8828'
								}
							}
						}
					},
					data: CreepingSpanBehavior.values
				}]
			};

			var myChart1 = echarts.init(document.getElementById('main1'));
			option1 = {
				title: {
					text: '一周活动量统计',
					textStyle: {
						fontSize: 16,
						color: '#333'
					}
				},
				tooltip: {
					trigger: 'axis',
				},

				xAxis: [{
					type: 'category',
					data: AbnormalActivityVolume.title,
					axisLabel: { //坐标轴刻度标签的相关设置。
						rotate: 45 //刻度标签旋转的角度，
					},
					scale: true,
					show: true, //显示纵轴false-不显示，true-显示
					name: '(天)'
				}],
				yAxis: [{
					type: 'value',
					boundaryGap: [0, 0.1],
					show: true, //显示纵轴false-不显示，true-显示
					name: '(只)'
				}],
				series: [{
					type: 'bar',
					barWidth: 15,
					itemStyle: {
						normal: {
							color: '#b684f3',
							label: {
								position: 'top',
								show: true,
								textStyle: {
									color: '#b684f3'
								}
							}
						}
					},
					data: AbnormalActivityVolume.values
				}]
			};
			var myChart2 = echarts.init(document.getElementById('main2'));
			option2 = {
				title: {
					text: '一周发情揭发统计',
					textStyle: {
						fontSize: 16,
						color: '#333'
					}
				},
				tooltip: {
					trigger: 'axis',
				},
				xAxis: [{
					type: 'category',
					data: OmenOfOestrus.title,
					axisLabel: { //坐标轴刻度标签的相关设置。
						rotate: 45 //刻度标签旋转的角度，
					},
					scale: true,
					show: true, //显示纵轴false-不显示，true-显示
					name: '(天)'
				}],
				yAxis: [{
					type: 'value',
					boundaryGap: [0, 0.1],
					show: true, //显示纵轴false-不显示，true-显示
					name: '(只)'
				}],
				series: [{
					type: 'bar',
					barWidth: 15,
					itemStyle: {
						normal: {
							color: '#84d499',
							label: {
								position: 'top',
								show: true,
								textStyle: {
									color: '#84d499'
								}
							}
						}
					},
					data: OmenOfOestrus.values

				}]
			};
			// 为echarts对象加载数据 
			myChart.setOption(option);
			myChart1.setOption(option1);
			myChart2.setOption(option2);
			var paramsData;
			myChart2.on('click', function(params) {
				localStorage.setItem('DetailsType', JSON.stringify(12));
				localStorage.setItem('paramsNameDate', JSON.stringify(params.name));
				DetailsOfOestrus(params);
			});
			}
			function butSou() {
				var keys = JSON.parse(localStorage.getItem('key'));
				var map = {};
				map.key = keys;
				map.date = $("#birthday").val();
				console.log($("#birthday").val())
				map.phoneType = "android";
				map.language = "zh";
				var jsonStr = JSON.stringify(map);
				var ajaxTimeoutTest = $.ajax({
					type: "POST",
					url: url_prefix + "estrusExpose",
					dataType: 'JSON',
					timeout: 10000,
					data: {
						'request': encryptByDES(jsonStr)
					},
					success: function(data) {
						dismissDialog();
						var str1 = decryptByDESModeEBC(data["result"]); //解密
						var params = str1.replace(/\+/g, " "); //去掉字符串里的+号
						var str2 = UTFTranslate.ReChange(chineseFromUtf8Url(params)); //转utf8
						var datas = JSON.stringify(str2); //转JSON字符串
						var aa = datas.replace(/\\n/g, " "); //去掉换行
						var objs = eval('(' + aa + ')');
						var bb = eval('(' + objs + ')');
						if(bb.head.status == 1) {
							console.log(bb)
							localStorage.setItem('estrusExposeData', JSON.stringify(bb.data));
							ShowTuXing();
							// window.location = "发情揭发.html";
						} else {
							mui.alert(bb.head.info);
						}
					},
					complete: function(XMLHttpRequest, status) { //请求完成后最终执行参数
						　　　　
						dismissDialog();
						if(status == 'timeout') { //超时,status还有success,error等值的情况
							ajaxTimeoutTest.abort();　　　　　
							mui.alert("网络请求超时...");　　　　
						}　　
					}
				});
			}
			//发情征兆统计数据
			function omenOfOestrus() {
				var keys = JSON.parse(localStorage.getItem('key'));
				var map = {};
				map.key = keys;
				map.date = $("#birthday").val();
				map.phoneType = "android";
				map.language = "zh";
				var jsonStr = JSON.stringify(map);
				showDialog();
				var ajaxTimeoutTest = $.ajax({
					type: "POST",
					url: url_prefix + "estrusStatistics",
					dataType: 'JSON',
					timeout: 10000,
					data: {
						'request': encryptByDES(jsonStr)
					},

					success: function(data) {
						var str1 = decryptByDESModeEBC(data["result"]); //解密
						var params = str1.replace(/\+/g, " "); //去掉字符串里的+号
						var str2 = UTFTranslate.ReChange(chineseFromUtf8Url(params)); //转utf8
						var datas = JSON.stringify(str2); //转JSON字符串
						var aa = datas.replace(/\\n/g, " "); //去掉换行
						var objs = eval('(' + aa + ')');
						var bb = eval('(' + objs + ')');
						if(bb.head.status == 1) {
							console.log(bb)
							localStorage.setItem('OmenOfOestrus', JSON.stringify(bb.data));
							creepingSpanBehavior();
						} else {
							mui.alert(bb.head.info);
						}
					},
					complete: function(XMLHttpRequest, status) { //请求完成后最终执行参数
						
						if(status == 'timeout') { //超时,status还有success,error等值的情况
							dismissDialog();　　　
							ajaxTimeoutTest.abort();　　　　　
							mui.alert("网络请求超时...");　　　　
						}　　
					}
				});
			}
			//爬跨行为统计数据
			function creepingSpanBehavior() {
				var keys = JSON.parse(localStorage.getItem('key'));
				var map = {};
				map.key = keys;
				map.date = $("#birthday").val();
				map.phoneType = "android";
				map.language = "zh";
				var jsonStr = JSON.stringify(map);
				var ajaxTimeoutTest = $.ajax({
					type: "POST",
					url: url_prefix + "climbingStatistics",
					dataType: 'JSON',
					timeout: 10000,
					data: {
						'request': encryptByDES(jsonStr)
					},
					success: function(data) {
						var str1 = decryptByDESModeEBC(data["result"]); //解密
						var params = str1.replace(/\+/g, " "); //去掉字符串里的+号
						var str2 = UTFTranslate.ReChange(chineseFromUtf8Url(params)); //转utf8
						var datas = JSON.stringify(str2); //转JSON字符串
						var aa = datas.replace(/\\n/g, " "); //去掉换行
						var objs = eval('(' + aa + ')');
						var bb = eval('(' + objs + ')');
						if(bb.head.status == 1) {
							console.log(bb)
							localStorage.setItem('CreepingSpanBehavior', JSON.stringify(bb.data));
							abnormalActivityVolume();
						} else {
							mui.alert(bb.head.info);
						}
					},
					complete: function(XMLHttpRequest, status) { //请求完成后最终执行参数
						
						if(status == 'timeout') { //超时,status还有success,error等值的情况
							　dismissDialog();　　　　
							ajaxTimeoutTest.abort();　　　　　
							mui.alert("网络请求超时...");　　　　
						}　　
					}
				});
			}
			//活动量异常统计数据
			function abnormalActivityVolume() {
				var keys = JSON.parse(localStorage.getItem('key'));
				var map = {};
				map.key = keys;
				map.date = $("#birthday").val();
				map.phoneType = "android";
				map.language = "zh";
				var jsonStr = JSON.stringify(map);
				var ajaxTimeoutTest = $.ajax({
					type: "POST",
					url: url_prefix + "activityStatistics",
					dataType: 'JSON',
					timeout: 10000,
					data: {
						'request': encryptByDES(jsonStr)
					},
					success: function(data) {
						var str1 = decryptByDESModeEBC(data["result"]); //解密
						var params = str1.replace(/\+/g, " "); //去掉字符串里的+号
						var str2 = UTFTranslate.ReChange(chineseFromUtf8Url(params)); //转utf8
						var datas = JSON.stringify(str2); //转JSON字符串
						var aa = datas.replace(/\\n/g, " "); //去掉换行
						var objs = eval('(' + aa + ')');
						var bb = eval('(' + objs + ')');
						if(bb.head.status == 1) {
							console.log(bb)
							localStorage.setItem('AbnormalActivityVolume', JSON.stringify(bb.data));
							estrusExpose();
						} else {
							mui.alert(bb.head.info);
						}
					},
					complete: function(XMLHttpRequest, status) { //请求完成后最终执行参数
						　　　　
						
						if(status == 'timeout') { //超时,status还有success,error等值的情况
							dismissDialog();
							ajaxTimeoutTest.abort();　　　　　
							mui.alert("网络请求超时...");　　　　
						}　　
					}
				});
			}

			function estrusExpose() {
				var keys = JSON.parse(localStorage.getItem('key'));
				var map = {};
				map.key = keys;
				map.date = $("#birthday").val();
				map.phoneType = "android";
				map.language = "zh";
				var jsonStr = JSON.stringify(map);
				var ajaxTimeoutTest = $.ajax({
					type: "POST",
					url: url_prefix + "estrusExpose",
					dataType: 'JSON',
					timeout: 10000,
					data: {
						'request': encryptByDES(jsonStr)
					},
					success: function(data) {
						dismissDialog();
						var str1 = decryptByDESModeEBC(data["result"]); //解密
						var params = str1.replace(/\+/g, " "); //去掉字符串里的+号
						var str2 = UTFTranslate.ReChange(chineseFromUtf8Url(params)); //转utf8
						var datas = JSON.stringify(str2); //转JSON字符串
						var aa = datas.replace(/\\n/g, " "); //去掉换行
						var objs = eval('(' + aa + ')');
						var bb = eval('(' + objs + ')');
						if(bb.head.status == 1) {
							console.log(bb)
							localStorage.setItem('estrusExposeData', JSON.stringify(bb.data));
							ShowTuXing();
							// window.location = "发情揭发.html";
						} else {
							mui.alert(bb.head.info);
						}
					},
					complete: function(XMLHttpRequest, status) { //请求完成后最终执行参数
						　　　　
						dismissDialog();
						if(status == 'timeout') { //超时,status还有success,error等值的情况
							ajaxTimeoutTest.abort();　　　　　
							mui.alert("网络请求超时...");　　　　
						}　　
					}
				});
			}
			var  tongbusuo=true;
			$("#birthday").change(function(){
				if (tongbusuo==true) {
					tongbusuo=false;
					omenOfOestrus();
					tongbusuo=true;
				}
			});
			function dtPicker3(str){
					           var dtPicker = new mui.DtPicker({ type: 'date' });
					           /*参数：'datetime'-完整日期视图(年月日时分)
					                   'date'--年视图(年月日)
					                   'time' --时间视图(时分)
					                   'month'--月视图(年月)
					                   'hour'--时视图(年月日时)
					           */      
					           dtPicker.show(function (selectItems) {
					              var y = selectItems.y.text;  //获取选择的年
					              var m = selectItems.m.text;  //获取选择的月
					              var d = selectItems.d.text;  //获取选择的日
					              var date = y + "-" + m + "-" + d ; 
					              $("#"+str).val(date); 
								  if (tongbusuo==true) {
								  	tongbusuo=false;
								  	omenOfOestrus();
								  	tongbusuo=true;
								  }
					           })
				}
		</script>

	</body>

</html>